<template>
  <el-form label-position="right" label-width="100px">
    <el-row :gutter="40">

      <el-col :span="24">
        <item-title title="终端产品信息" />
      </el-col>

      <el-col :span="8">
        <el-form-item label="终端名称：" style="width:100%">
          <el-link :underline="false" type="primary" @click="handlToTerminal">
            <toolTip :title="formData?.terminalName" />
          </el-link>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="所在地区：">
          <span>{{ formData?.provinceName }}/{{ formData?.cityName }}/{{ formData?.areaName }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="终端类型：">
          {{ getLabel('app_mode', formData?.terminalType) }}
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="产品商品名：" style="width:100% ;">
          <toolTip :title="formData?.productName" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="通用名：" style="width:100%">
          <toolTip :title="formData?.productPopularName" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="包装规格：">
          <toolTip :title="formData?.packSpecs" />
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="生产厂家：" style="width:100% ;">
          <toolTip :title="formData?.producer" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="终端价：">
          <el-link :underline="false" type="primary" @click="handlToTerminalPrice">
            <span>{{ formData?.terminalPrice }}</span>
            <span v-if="formData?.sellUnit">
              元/{{ getLabel('sell_unit', formData?.sellUnit) }}
            </span>
          </el-link>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item style="width:100% ;" :label=" formData?.agentType === 'agent' ? '代理名称：' : '兼职名称'">
          <toolTip :title="formData?.agentName" />
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="交易价：">
          <el-link :underline="false" type="primary" @click="handlToTradePrice">
            <span>{{ formData?.tradePrice }}</span>
            <span v-if="formData?.sellUnit">
              元/{{ getLabel('sell_unit', formData?.sellUnit) }}
            </span>
          </el-link>
        </el-form-item>
      </el-col>

      <template v-if="formData?.distributeContractDetails && formData?.distributeContractDetails.length > 0">
        <el-col :span="24">
          <item-title title="配送商信息" />
        </el-col>

        <el-col :span="24">
          <distributor-table :boole="false" :list="formData?.distributeContractDetails" :unit="formData?.sellUnit" />
        </el-col>
      </template>

      <el-col :span="24" style="margin-top: 20px">
        <item-title title="修改记录" />
      </el-col>

      <el-col :span="24">
        <operation-view :id="id" mode="dev" />
      </el-col>

    </el-row>

  </el-form>

  <!--终端名称-->
  <detail-drawer ref="terminalRef" custom-title>
    <template #title>
      <span>{{formData?.terminalName}}</span>
    </template>
    <template #contents>
      <terminal-details :id="formData?.terminalId" />
    </template>
  </detail-drawer>

  <!--终端价-->
  <detail-drawer ref="terminalPriceRef" custom-title>
    <template #title>
      <span>产品终端价</span>-
      <span>{{ formData?.productPriceStrategyDetail?.priceNumber }}</span>
    </template>
    <template #contents>
      <terminalPrice :id="formData?.productPriceId" />
    </template>
  </detail-drawer>

  <!--交易价-->
  <detail-drawer ref="tradePriceRef" custom-title>
    <template #title>
      <span>产品交易价</span>-
      <span>{{ formData?.productPriceStrategyDetail?.priceNumber }}</span>
    </template>
    <template #contents>
      <tradePrice :id="formData?.agentProductId" :booleAgent="false" />
    </template>
  </detail-drawer>
</template>

<script>
import {
  defineAsyncComponent,
  getCurrentInstance,
  inject,
  onMounted,
  reactive,
  toRefs,
} from "vue";
import { useRoute, useRouter } from "vue-router";

export default {
  props: {
    id: {
      type: Number,
      default: 0,
    },
  },
  components: {
    tradePrice: defineAsyncComponent(() =>
      import(
        "@CRM/views/commonView/detailComponents/agent/productAndPriceInfoView"
      )
    ),
    terminalPrice: defineAsyncComponent(() =>
      import("@CRM/views/commonView/detailComponents/product/terminalPrice")
    ),
    terminalDetails: defineAsyncComponent(() =>
      import("@CRM/views/commonView/detailComponents/terminal/terminalInfo")
    ),
  },
  setup(props, context) {
    const api = inject("api");
    const router = useRouter();
    const route = useRoute();
    const currentInstance = getCurrentInstance();
    const data = reactive({
      tableData: [],
      formData: null,
      terminalRef: null,
      tradePriceRef: null,
      terminalPriceRef: null,
    });

    const handlToTerminal = () => {
      data.terminalRef.open();
    };

    const handlToTerminalPrice = () => {
      data.terminalPriceRef.open();
    };

    const handlToTradePrice = () => {
      data.tradePriceRef.open();
    };

    const handlDetails = () => {
      api.marketingMatching
        .REGIONAL_DISTRIBUTION_TERMINAL_DETAILS(props.id)
        .then((res) => {
          if (res.code === 0) {
            data.formData = res.data;
          }
        });
    };

    onMounted(() => {
      handlDetails();
    });

    return {
      ...toRefs(data),
      handlToTerminalPrice,
      handlToTradePrice,
      handlToTerminal,
    };
  },
};
</script>

<style lang="scss" scoped>
</style>